import React, { useEffect, useState } from 'react'
import './index.modules.scss'
import { Button, Checkbox, Form, Input, message } from 'antd'
import loginPng from '@/assets/images/login.png'
import { useNavigate } from 'react-router-dom'
import { login } from '@/http/api/login'
import Cookie from 'js-cookie'
const App = () => {
  const navigte = useNavigate()
  const onFinish = async (values) => {
    const res = await login(values)

    if (res.status === 200) {
      Cookie.set('token', res.data.token)
      navigte('/home')
      localStorage.setItem('userInfo', JSON.stringify(res.data.res))
      if (values.remember) {
        localStorage.setItem('accountInfo', JSON.stringify(values))
      }
    } else {
      message.error('账号或密码错误')
    }
  }
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo)
  }
  return (
    <div className="login">
      <div className="loginBox">
        <div className="imageBox">
          <img className="image" src={loginPng} alt="" />
          <h1 className="imageButtomSize">专注保护爱车的每一个细节！</h1>
        </div>
        <div className="formBox">
          <h1 className="imageButtomSize">力达小程序管理端</h1>
          <div>
            <Form
              name="basic"
              labelCol={{ span: 7 }}
              wrapperCol={{ span: 17 }}
              style={{ maxWidth: 600 }}
              initialValues={{
                remember: true,
                password: JSON.parse(localStorage.getItem('accountInfo'))
                  ? JSON.parse(localStorage.getItem('accountInfo')).password
                  : '',
                phone: JSON.parse(localStorage.getItem('accountInfo'))
                  ? JSON.parse(localStorage.getItem('accountInfo')).phone
                  : ''
              }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
            >
              <Form.Item
                label="账号"
                name="phone"
                rules={[
                  {
                    required: true,
                    message: '请输入账号'
                  }
                ]}
              >
                <Input />
              </Form.Item>

              <Form.Item
                label="密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码'
                  }
                ]}
              >
                <Input.Password />
              </Form.Item>

              <Form.Item
                name="remember"
                valuePropName="checked"
                wrapperCol={{
                  offset: 7,
                  span: 16
                }}
              >
                <Checkbox>记住我</Checkbox>
              </Form.Item>

              <Form.Item
                wrapperCol={{
                  offset: 8,
                  span: 16
                }}
              >
                <Button type="primary" htmlType="submit">
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  )
}
export default App
